<template>
  <el-container class="my-app">
    <el-header class="header">Header</el-header>
    <el-container class="main">
      <el-aside width="200px">
        <MyMenu></MyMenu>
      </el-aside>
      <el-container>
        <el-main id="my-main" @scroll="onScroll" @mousewheel="onWheel">
          <router-view :scrollTop="scrollTop" @updateVal="updateVal"/>
        </el-main>
        <el-backtop target="#my-main" />
      </el-container>

    </el-container>
    <el-footer class="footer">
      <div style="width:430px;margin:0 auto; padding:13px 0;">
        <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402012337" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="./assets/gongan.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11011402012337号</p></a>
        <span style="vertical-align: top;color: #939393;"> 京ICP备15049697号-1</span>
      </div>

    </el-footer>
  </el-container>
  <div>


  </div>
</template>

<script>
  import MyMenu from '@/components/Menu/menu.vue'
  // import MyMenu from './components/Menu/menu.vue'
  import {ref} from 'vue'

  export default {
    name: 'App',
    components: {
      MyMenu
    },
    setup() {
      const scrollTop = ref({})

      function onScroll(e) {
        if (scrollTop.value.flag) {
          scrollTop.value = {
            top: e.target.scrollTop,
            flag: true
          }
        }
      }

      function onWheel() {
        scrollTop.value.flag = true
      }

      function updateVal(val) {
        console.log('val:', val)
        scrollTop.value.flag = val
      }

      return {
        scrollTop,
        onScroll,
        onWheel,
        updateVal
      }
    }
  }
</script>

<style lang="scss">
  .my-app {
    width: 100%;
    height: 100%;
    .header {
      width: 100%;
      height: 50px;
      background: #2c3e50;
    }
    .main {
      width: 100%;
      height: calc(100% - 100px);
    }
    .footer {
      width: 100%;
      height: 50px;
      background: #2c3e50;
    }
  }
</style>
